<template>
  <div class="personal-info">
    <div class="personal-info-list">
      <!-- <div
        class="integration-item"
        v-for="(item,index) in list"
        :key="index"
        @click="goToPath(item.path)"
      >
        <p>
          <img :src="item.icon" alt />
        </p>
        <p>{{item.title}}</p>
      </div>-->

      <cell-group>
        <field
          v-for="(item,index) in list"
          :key="index"
          @click="goToPath(item.path)"
          :label="item.title"
          readonly
        >
          <div class="icon" slot="left-icon">
            <img :src="item.icon" alt />
          </div>
        </field>
      </cell-group>
    </div>
  </div>
</template>

<script>
import { Button, Field, Cell, CellGroup } from "vant";

export default {
  components: {
    vanButton: Button,
    Field,
    Cell,
    CellGroup
  },
  data() {
    return {
      list: [
        {
          title: "修改头像",
          icon: require("../img/personal.png"),
          path: "/revise_avatar"
        },
        {
          title: "修改密码",
          icon: require("../img/password.png"),
          path: "/revise_password"
        },
        {
          title: "我的地址",
          icon: require("../img/location.png"),
          path: "/address_list"
        }
      ]
    };
  },
  mounted() {
    this.$EventBus.$on("rightEvent", function() {
      console.log("右键");
    });
  },
  methods: {
    goToPath(path) {
      this.$router.push({
        path: path
      });
    }
  }
};
</script>

<style scoped>
.icon {
  width: 19px;
  height: 19px;
}

.icon img {
  width: 100%;
  height: 100%;
}
</style>